<template>
	<view class="container">
		<!-- 头部区域 -->
		<!-- 版本切换和个人信息 -->
		<!-- 版本切换 -->
		<view class="header-section">
			<view class="version-switch" :data-active="currentVersion">
				<view class="version-tab" :class="{ active: currentVersion === 'entertainment' }"
					@click="switchVersion('entertainment')">
					娱乐版
				</view>
				<view class="version-tab" :class="{ active: currentVersion === 'host' }" @click="switchVersion('host')">
					主理版
				</view>
			</view>
		</view>


		<!-- 个人信息 -->
		 <view class="user-info-section">
			<view class="user-info" @click="goToProfile">
			<view class="user-avatar">
				<image :src="userInfo.avatar" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<text class="user-name">{{ userInfo.name }}</text>
				<view class="certification-status">
					<text class="status-text" :class="{ certified: userInfo.curatorState===1 }">
						{{ userInfo.curatorStateName}}
					</text>
				</view>
			</view>
		</view>

		 </view>



		<!-- 搜索栏 -->
		<view class="search-bar" v-if="currentVersion === 'entertainment'">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<input placeholder="搜活动、主理人" v-model="searchObject.keyword" @input="onSearch" />
			</view>
		</view>


		<!-- 可滚动内容区域 -->
		<!-- 娱乐版内容 -->

		<!-- 时间筛选 -->
		<view class="time-filter" v-if="currentVersion === 'entertainment'">
			<scroll-view scroll-x class="time-scroll">
				<view class="time-tabs">
					<view class="time-tab" :class="{ active: selectedTime === 'all' }" @click="selectTime('all')">
						<view class="time-label">全部</view>
						<view class="time-count">{{ pageData.total }}场</view>
					</view>
					<view v-for="(day, index) in timeOptions" :key="index" class="time-tab"
						:class="{ active: selectedTime === day.date }" @click="selectTime(day)">
						<view class="time-label">{{ day.label }}</view>
						<view class="time-date">{{ day.date }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 通告分类 -->
		<view class="category-filter" v-if="currentVersion === 'entertainment'">
			<scroll-view scroll-x class="category-scroll">
				<view class="category-tabs">
					<view class="category-tab" :class="{ active: selectedCategory === 'all' }"
						@click="selectCategory('all')">
						全部
					</view>
					<view v-for="category in categories" :key="category.id" class="category-tab"
						:class="{ active: selectedCategory === category.id }" @click="selectCategory(category.id)">
						{{ category.name }}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 通告列表 -->
		<view class="notice-list" v-if="currentVersion === 'entertainment'">
			<view v-for="notice in pageData.data" :key="notice.id" class="notice-item" @click="goToDetail(notice)">
				<!-- 门店图片 -->
				<view class="store-image">
					<image :src="notice.shopLog" mode="aspectFill"></image>
				</view>

				<!-- 主理人信息 -->
				<view class="host-info">
					<image class="host-avatar" :src="notice.userAvatar" mode="aspectFill"></image>
					<text class="host-name">主理人：{{ notice.userName }}</text>
				</view>

				<!-- 票根虚线 -->
				<view class="ticket-divider">
					<view class="dashed-line"></view>
				</view>

				<!-- 通告详情 -->
				<view class="notice-details" >
					<text class="notice-title">{{ notice.title }}</text>
					<view class="notice-meta">
						<text class="fee">¥{{ notice.fee }}/人</text>
						<text class="time">{{ notice.beginDate }}</text>
					</view>
				</view>

				<!-- 报名信息和上车按钮 -->
				<view class="signup-action-row">
					<!-- 报名信息 -->
					<view class="signup-info">
						<view class="signup-avatars" v-if="notice.joins && notice.joins.length > 0">
							<image v-for="(item, index) in notice.joins.slice(0, 5)" :key="index" :src="item.avatar"
								class="signup-avatar" mode="aspectFill"></image>
							<text v-if="notice.joins.length > 5" class="more-count">
								+{{ notice.joins.length - 5 }}
							</text>
						</view>
						<text class="waiting-count" v-if="notice.waitingNum>0">等{{ notice.waitingNum }}人</text>
					</view>

					<!-- 上车按钮 -->
					<view class="action-area">
						<view class="join-btn" :class="{ disabled: notice.fullState === 1 }"
							:disabled="notice.fullState === 1" >
							{{ notice.fullState === 1 ? '满员' : '上车' }}
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多状态 -->
			<view class="load-more" v-if="loading">
				<view v-if="loading" class="loading">
					<text class="loading-text">正在加载...</text>
				</view>
				<view v-else-if="!hasMore" class="no-more">
					<text class="no-more-text">没有更多数据了</text>
				</view>
			</view>
		</view>


		<!-- 主理版内容 -->
		<view v-if="currentVersion === 'host'" class="host-management">
			<!-- 主理功能清单 -->
			<view class="function-list">
				<view v-for="func in hostFunctions" :key="func.id" class="function-item" @click="goToFunction(func)">
					<view class="function-icon">
						<image :src="func.icon" mode="aspectFit"></image>
					</view>
					<view class="function-content">
						<text class="function-title">{{ func.title }}</text>
						<text class="function-desc">{{ func.description }}</text>
					</view>
					<view class="function-arrow">
						<text class="arrow-icon">›</text>
					</view>
				</view>
			</view>

		</view>


		<!-- 回到顶部按钮 -->
		<view class="back-to-top" :class="{ show: showBackToTop }" @click="backToTop">
			<text class="back-to-top-icon">↑</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
// 生成时间选项（从今天开始的10天）
import { useLoadList } from "/common/data"
import { usePageData } from "/common/usePageData";
import { onLoad } from "@dcloudio/uni-app";
import { login, post } from "../../common/api";
import { one } from '../../common/data';

const avatarUrl = 'https://wtjt.oss-cn-beijing.aliyuncs.com/avatar.jpg'

// 版本切换
const currentVersion = ref('entertainment')

// 用户信息
const userInfo = ref({
	avatar: avatarUrl,
	name: 'SKP用户',
	isCertified: false
})

// 搜索
const searchKeyword = ref('')

// 加载更多相关状态
const hasMore = ref(true)

// 回到顶部相关状态
const showBackToTop = ref(false)
const scrollTop = ref(0)

// 时间筛选
const selectedTime = ref('all')

const { listData: timeOptions } = useLoadList("last7d", {})

const { listData: categories } = useLoadList("topic_catalog_list", {})

const searchObject = ref({
	catalog: null,
	page: 1,
	size: 10,
	beginDate: null,
	endDate: null
})

const { pageData, status, searchList, search, loading, loadMore } = usePageData("topic_list", searchObject)


// 通告分类
const selectedCategory = ref('all')


// 主理版功能清单
const hostFunctions = ref([
	{
		id: 2,
		title: '发布通告',
		description: '创建和发布新的活动通告',
		icon: '/static/icons/activity-publish.svg',
		route: '/pages/topic/pub_select_date'
	},
	{
		id: 3,
		title: '我的通告',
		description: '查看我发布的通告',
		icon: '/static/icons/member-management.svg',
		route: '/pages/topic/my'
	},
	{
		id: 4,
		title: '余额提现',
		description: '查看活动收入',
		icon: '/static/icons/data-analysis.svg',
		route: '/pages/manager/money'
	}
])

// 月度统计数据
const monthlyStats = ref({
	totalActivities: 28,
	totalParticipants: 342,
	totalRevenue: '15,680',
	averageRating: '4.8'
})

const goToProfile = () => {
	uni.navigateTo({
		url: '/pages/my/index'
	})
}

// 跳转到功能页面
const goToFunction = (func) => {
	uni.navigateTo({
		url: func.route
	})
}


// 方法
const switchVersion = (version) => {

	if(version==='host'){
		if(userInfo.value.curatorState===0||userInfo.value.curatorState===2){
			uni.showToast({
				title: '请先认证主理人',
				icon: 'none'
			})
			return
		}
	}
	currentVersion.value = version
}

const onSearch = () => {
	// 搜索逻辑已在computed中处理
	search();
}

const selectTime = (time) => {
	if(time.date){		
		selectedTime.value = time.date
	}else{
		selectedTime.value =time
	}


	if (time.start_time) {
		searchObject.value.beginDate = time.start_time
		searchObject.value.endDate = time.end_time
	} else {
		searchObject.value.beginDate = null
		searchObject.value.endDate = null
	}
	search();
}

const selectCategory = (category) => {
	selectedCategory.value = category
	if (category) {
		searchObject.value.catalog = category
	}
	if (category === 'all') {
		searchObject.value.catalog = null
	}
	search();
}

const joinNotice = (notice) => {
	if (notice.isFull) return

	uni.showToast({
		title: '报名成功',
		icon: 'success'
	})
}


// 监听滚动事件
const onScroll = (e) => {
	const scrollTopValue = e.detail.scrollTop
	// 当滚动超过300rpx时显示回到顶部按钮
	showBackToTop.value = scrollTopValue > 300
}

// 回到顶部
const backToTop = () => {
	scrollTop.value = Math.random() // 需要改变值才能触发滚动
	setTimeout(() => {
		scrollTop.value = 0
	}, 100)
}


onLoad(async () => {
	let res = await login();
	console.log(res);
	const param = {};
	param.type = "wxapp";
	param.code = res.code;
	let resLogin = await post("/user/loginOauth", param);
	console.log(resLogin);


	if (resLogin.code === 200) {
		if (resLogin.data.sessionId) {
			uni.setStorageSync('Authorization', resLogin.data.sessionId);
			uni.setStorageSync('token', resLogin.data.sessionId);
			uni.setStorageSync('openId', resLogin.data.openId);
			uni.setStorageSync('userId', resLogin.data.id);
		}
	}

	// 加载用户信息
	let userRes = await one("current_user", {});
	if (userRes.code === 200) {
		userInfo.value = userRes.data;
	}

})


const goToDetail = (notice) => {
	uni.navigateTo({
		url: `/pages/topic/index?id=${notice.id}`
	})
}

</script>

<style scoped lang="scss">
.container {
	background-color: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 头部区域 */
.header {
	background-color: #AA0E99;
	flex-shrink: 0;
}

/* 可滚动内容区域 */
.scrollable-content {
	flex: 1;
	background-color: #f5f5f5;
	height: 0;
}

.scrollable-content::-webkit-scrollbar {
	display: none;
}

/* 版本切换和个人信息 */
.header-section {
	background-color: #AA0E99;
	padding: 16rpx 20rpx;
	display: flex;
	flex-direction: column;
	padding-top: 80rpx;
	padding-bottom: 20rpx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
}

/* 版本切换 */
.version-switch {
	display: flex;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	padding: 8rpx;
	margin-bottom: 20rpx;
	position: sticky;
	width: 300rpx;
	align-self: center;
	top: 60rpx;
	z-index: 200;
}

.version-tab {
	flex: 1;
	text-align: center;
	padding: 16rpx 20rpx;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
	position: relative;
	z-index: 2;
}

.version-tab.active {
	color: #AA0E99;
	font-weight: bold;
}

/* 滑动背景 */
.version-switch::before {
	content: '';
	position: absolute;
	top: 8rpx;
	left: 8rpx;
	width: calc(50% - 8rpx);
	height: calc(100% - 16rpx);
	background-color: #fff;
	border-radius: 16rpx;
	transition: transform 0.3s ease;
	z-index: 1;
}

.version-switch[data-active="host"]::before {
	transform: translateX(100%);
}
.user-info-section{
	background-color: #AA0E99;
	box-sizing: border-box;
	padding: 0 30rpx;
}
/* 个人信息 */
.user-info {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 20rpx;
	padding: 20rpx;
	margin-top: 200rpx;
	box-sizing: border-box;
    margin-bottom: 20rpx;
}

.user-avatar image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: 3rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
	flex: 1;
}

.user-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 8rpx;
}

.certification-status {
	display: flex;
	align-items: center;
}

.status-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	padding: 6rpx 16rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
}

.status-text.certified {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.3);
	font-weight: bold;
}

/* 搜索栏 */
.search-bar {
	background-color: #AA0E99;
	padding: 0rpx 30rpx;
	padding-bottom: 20rpx;
}

.search-input {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 30rpx;
	padding: 16rpx 30rpx;
	box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
}

.search-icon {
	margin-right: 20rpx;
	font-size: 32rpx;
	color: #999;
}

.search-input input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.search-input input::placeholder {
	color: #ccc;
}

/* 时间筛选 */
.time-filter {
	background-color: #fff;
	padding: 10rpx 0;
	margin: 0rpx 0;
	z-index: 200;
}

.time-scroll {
	white-space: nowrap;
}

.time-scroll::-webkit-scrollbar {
	display: none;
}

.time-tabs {
	display: flex;
	padding: 0 30rpx;
}

.time-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15rpx 25rpx;
	margin-right: 20rpx;
	font-size: 26rpx;
	color: #666;
	background-color: transparent;
	border-radius: 12rpx;
	white-space: nowrap;
	min-width: 80rpx;
	position: relative;
}

.time-tab.active {
	color: #AA0E99;
}

.time-tab.active::after {
	content: '';
	position: absolute;
	bottom: -10rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #AA0E99;
	border-radius: 2rpx;
}

.time-label {
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 4rpx;
}

.time-date {
	font-size: 24rpx;
	color: #999;
}

.time-count {
	font-size: 24rpx;
	color: #999;
}

.time-tab.active .time-date,
.time-tab.active .time-count {
	color: #AA0E99;
}

/* 通告分类 */
.category-filter {
	background-color: #AA0E99;
	padding: 20rpx 0;
	margin: 0 0 20rpx 0;
}

.category-scroll {
	white-space: nowrap;
}

.category-scroll::-webkit-scrollbar {
	display: none;
}

.category-tabs {
	display: flex;
	padding: 0 30rpx;
}

.category-tab {
	padding: 15rpx 30rpx;
	margin-right: 20rpx;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.7);
	background-color: transparent;
	border-radius: 0;
	white-space: nowrap;
	position: relative;
	font-weight: 500;
}

.category-tab.active {
	color: #fff;
	font-weight: bold;
}

/* 通告列表 */
.notice-list {
	padding: 10rpx 30rpx;
	background-color: #fff;
}

.notice-item {
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	position: relative;
}

.store-image {
	position: relative;
	width: 100%;
	height: 300rpx;
	overflow: hidden;
}

.store-image image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.host-info {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.host-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 15rpx;
	border: 2rpx solid #f0f0f0;
}

.host-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

/* 票根虚线 */
.ticket-divider {
	padding: 0 30rpx;
	position: relative;
}

.dashed-line {
	height: 2rpx;
	background: repeating-linear-gradient(to right,
			#ddd 0,
			#ddd 10rpx,
			transparent 10rpx,
			transparent 20rpx);
}

/* 通告详情 */
.notice-details {
	padding: 20rpx 30rpx;
}

.notice-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
	display: block;
	line-height: 1.4;
}

.notice-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26rpx;
	color: #666;
}

.fee {
	color: #FF6B35;
	font-weight: bold;
	font-size: 28rpx;
}

.time {
	color: #666;
	font-size: 24rpx;
}

/* 报名信息和上车按钮 */
.signup-action-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #f0f0f0;
	background-color: #fff;
}

/* 报名信息 */
.signup-info {
	display: flex;
	flex-direction: row;
	flex: 1;
	align-items: center;
}

.signup-avatars {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.signup-avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: -10rpx;
	border: 3rpx solid #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.signup-avatar:last-child {
	margin-right: 0;
}

.more-count {
	font-size: 24rpx;
	color: #999;
	margin-left: 15rpx;
	font-weight: 500;
}

.waiting-count {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

/* 上车按钮 */
.action-area {
	margin-left: 20rpx;
}

.join-btn {
	width: 120rpx;
	height: 60rpx;
	background-color: #AA0E99;
	color: #fff;
	border: none;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 12rpx rgba(170, 14, 153, 0.3);
	transition: all 0.3s ease;
	line-height: 60rpx;
	text-align: center;
}

.join-btn:active {
	transform: scale(0.95);
	box-shadow: 0 2rpx 8rpx rgba(170, 14, 153, 0.2);
}

.join-btn.disabled {
	background-color: #ccc;
	color: #999;
	box-shadow: none;
	transform: none;
}

/* 加载更多样式 */
.load-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 30rpx;
}

.loading,
.no-more {
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-text {
	font-size: 28rpx;
	color: #999;
}

.loading-text::before {
	content: '';
	display: inline-block;
	width: 30rpx;
	height: 30rpx;
	border: 3rpx solid #f3f3f3;
	border-top: 3rpx solid #AA0E99;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 16rpx;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.no-more-text {
	font-size: 28rpx;
	color: #ccc;
}

/* 回到顶部按钮样式 */
.back-to-top {
	position: fixed;
	right: 30rpx;
	bottom: 120rpx;
	width: 80rpx;
	height: 80rpx;
	background-color: #AA0E99;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4rpx 20rpx rgba(170, 14, 153, 0.3);
	transform: translateY(150rpx);
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 999;
}

.back-to-top.show {
	transform: translateY(0);
	opacity: 1;
}

.back-to-top-icon {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
	line-height: 1;
}

.back-to-top:active {
	transform: scale(0.95);
	background-color: #8B0C7A;
}

/* 主理版样式 */
.host-management {
	padding: 30rpx;
}

/* 功能清单样式 */
.function-list {
	margin-bottom: 40rpx;
}

.function-item {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.function-item:active {
	transform: scale(0.98);
	background-color: #f8f8f8;
}

.function-icon {
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #AA0E99, #E91E63);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
	box-shadow: 0 8rpx 20rpx rgba(170, 14, 153, 0.3);
}

.function-icon image {
	width: 40rpx;
	height: 40rpx;
	filter: brightness(0) invert(1);
}

.function-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.function-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.function-desc {
	font-size: 26rpx;
	color: #666;
	line-height: 1.4;
}

.function-arrow {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arrow-icon {
	font-size: 40rpx;
	color: #ccc;
	font-weight: bold;
}

/* 快速统计样式 */
.quick-stats {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: block;
}

.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30rpx;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20rpx;
	background: linear-gradient(135deg, #f8f9ff, #fff);
	border-radius: 16rpx;
	border: 1rpx solid #f0f0f0;
}

.stat-number {
	font-size: 36rpx;
	font-weight: bold;
	color: #AA0E99;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 26rpx;
	color: #666;
}
</style>
